I know, this is a big one. However, I wanted to create an article that provides a complete picture. Therefore I did not split it into multiple parts but rather combine all of the steps needed to create an app like this in one place. Feel free to skip ahead to the parts that you are interested in or follow along from top to bottom to create your own Notion-style application.

When you decide to take the time and follow along, you will see how you can create a full stack Next.js application including everything from authentication, to CRUD operations and the configuration of a modern rich text editor. However, we will not cover the very basics of Next.js, so you should already be familiar with what it is and how it works. Let’s not waste more time and get started!

Table of Contents

1. Resources
2. Getting Started
3. Initializing Prisma
4. Authentication using Clerk
5. Setting up Planetscale
6. Environment Variable Validation
7. Getting started with TipTap
8. Installing Shadcn/UI
9. Creating our Pages
10. Advanced Editor Configuration
11. Prisma Configuration
12. Sidebar Configuration and CRUD Operations
13. Editor and Database Synchronization
14. Summary

1. Resources

We are going to use the following technologies:

• Next.js 13.4 as the framework
• Clerk for authentication
• Prisma as ORM
• Planetscale as database
• TipTap as our Editor